<template>
    <div class="main-con horsemanInfo">
        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">门店名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeName" placeholder="请输入门店名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">门店编号</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.storeNo" placeholder="请输入门店编号" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">骑手名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.userName" placeholder="请输入骑手名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">手机号</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.telPhone" placeholder="请输入手机号" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">角色</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.role" placeholder="请选择角色" @change="handleSearch">
                        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title">状态</div>
                <div class="search-item-input">
                    <el-select size="mini" v-model="formData.status" placeholder="请选择状态" @change="handleSearch">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group-con">
            <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
            <el-button size="mini" type="primary" @click="handleDelete">删除</el-button>
            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="table-con" v-loading="loading">
            <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="userName" label="用户名" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="telPhone" label="手机号" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="roleDesc" label="角色" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="账号类型" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{scope.row.roleType == 'system' ? '系统账号':'商家账号'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店名称" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.role==8">{{getStoreNameStr(scope.row.horsemanStoreList)}}</span>
                        <span v-else>{{scope.row.storeName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{scope.row.status == '1' ? '开工':'停工'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="新增时间" width="" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="考勤记录" width="" align="center">
                    <template slot-scope="scope">
                        <div class="handleBtn">
                            <span @click="handleUpdate(scope.$index, scope.row)">查看详情</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="" align="center">
                    <template slot-scope="scope">
                        <div class="handleBtn" v-if="scope.row.accountNo != 'admin'">
                            <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
                            <span :class="scope.row.isStop == 0 ? 'danger':'primary'" @click="handleStop(scope.$index, scope.row)">{{scope.row.isStop
                                == 0 ? "停用":"启用"}}</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 表格分页 -->
        <div class="pagination-con">
            <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            </m-pagination>
        </div>
    </div>
</template>

<script>
import {
    queryHorsemanInfo,
    deleteHorsemanInfo,
    editHorsemanStatus
} from "@/common/service/horsemanManagement/horsemanInfo.js";
import mPagination from "@/components/m-pagination/m-pagination";
import { api } from "@/common/http/index.js";
export default {
    name: "horsemanInfo",
    data() {
        return {
            // 搜索条件
            formData: {
                storeName: "", //门店名称
                storeNo: "", //门店编号
                userName: "", //骑手名称
                telPhone: "", //手机号
                role: "", //角色
                status: "", //状态
                pageNum: 1,
                pageSize: 10
            },
            roleOptions: [
                {
                    value: "",
                    label: "全部"
                },
                {
                    value: "4",
                    label: "骑手"
                },
                {
                    value: "8",
                    label: "骑手组长"
                }
            ], //角色下拉框数据
            statusOptions: [
                {
                    value: "",
                    label: "全部"
                },
                {
                    value: "1",
                    label: "开工"
                },
                {
                    value: "0",
                    label: "休息"
                }
            ], //状态下拉框数据
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false, //表格加载动画

            handleSelection: [] //多选框勾选的数据
        };
    },
    created() {
        //初始化表格数据
        this._queryHorsemanInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询系统用户信息表格数据
        _queryHorsemanInfo() {
            this.loading = true;
            queryHorsemanInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryHorsemanInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryHorsemanInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryHorsemanInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                storeName: "",
                storeNo: "",
                userName: "",
                telPhone: "",
                role: "",
                status: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryHorsemanInfo();
        },

        /*----------------------------添加操作----------------------------*/
        handleAdd() {
            this.$router.push({
                path: "/index/horsemanInfo/editHorsemanInfo",
                query: {
                    editType: "add",
                    editText: "新增"
                }
            });
        },

        /*----------------------------编辑操作----------------------------*/
        handleUpdate(index, row) {
            this.$router.push({
                path: "/index/horsemanInfo/editHorsemanInfo",
                query: {
                    editType: "update",
                    editText: "编辑"
                }
            });
            localStorage.setItem("editData", JSON.stringify(row));
        },

        /*----------------------------删除操作----------------------------*/
        //点击删除
        handleDelete() {
            if (this.handleSelection.length == 0) {
                this.$message.error("请选择删除的骑手");
                return false;
            }
            this.$confirm("您确定删除此系统用户吗？", "删除系统用户信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this._deleteHorsemanInfo();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        //执行删除操作
        _deleteHorsemanInfo(row) {
            var arr = [];
            this.handleSelection.forEach((item, index) => {
                arr.push(item.id);
            });
            var data = {
                idList: arr.join(",")
            };
            deleteHorsemanInfo(data)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this._queryHorsemanInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------启用/停用操作----------------------------*/
        //点击启用/停用
        handleStop(index, row) {
            this.$confirm("您确定停用/启用此骑手吗？", "停用/启用骑手", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this._editHorsemanStatus(row);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作"
                    });
                });
        },
        //执行启用/停用操作
        _editHorsemanStatus(row) {
            var data = {};
            if (row.isStop == 1) {
                data = {
                    id: row.id,
                    isStop: 0
                };
            } else if (row.isStop == 0) {
                data = {
                    id: row.id,
                    isStop: 1
                };
            }
            editHorsemanStatus(data)
                .then(res => {
                    this._queryHorsemanInfo();
                    if (row.isStop == 0) {
                        this.$message({
                            type: "success",
                            message: "停用成功!"
                        });
                    } else if (row.isStop == 1) {
                        this.$message({
                            type: "success",
                            message: "启用成功!"
                        });
                    }
                })
                .catch(err => {
                    this.$message.error(err);
                });
        },

        /*----------------------------导出操作----------------------------*/
        handleExport() {
            this.UTILS.exportUtil(api.exportHorsemanInfo, this.formData);
        },

        /*----------------------------格式化门店名称的操作----------------------------*/
        getStoreNameStr: function(obj) {
            var _str = "";
            obj.forEach(function(item, idx) {
                if (idx == 0) {
                    _str += item.storeName;
                } else {
                    _str += "，" + item.storeName;
                }
            });
            return _str;
        },

        /*----------------------------多选框勾选数据的操作----------------------------*/
        handleSelectionChange(val) {
            this.handleSelection = val;
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>